<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{ padding: 0; margin: 0; list-style-type: none;}
    body{ position: relative; width: 100vw;height: 100vh; overflow: hidden; }
    .cont{display: flex; overflow-y: scroll; overflow-x: hidden; flex-direction: column; scroll-snap-type: y mandatory; /* 滚动条滚动到顶部 */ scroll-behavior: smooth; /* 滚动条平滑滚动 */ transition: all 1s;}
    section{ width: 100vw; height: 100vh; flex: none; scroll-snap-align: start; /* 滚动条滚动到顶部 */}
    .yuanquan{ position: fixed; right: 20px; top: 50%; transform: translateY(-50%);}
    .yuanquan span{ display: block; width: 20px; height: 20px; background-color: #333; border-radius: 50%; margin-bottom: 5px;}
    .actions{ background-color: red!important;}
</style>
<body>
    <main class="cont">
         <section style="background-color: aliceblue;">1</section>
         <section style="background-color: antiquewhite;">2</section>
         <section style="background-color: aqua;">3</section>
         <section style="background-color: aquamarine;">4</section>
         <section style="background-color: azure;">5</section>
         <section style="background-color: bisque;">6</section>
    </main>
    <div class="yuanquan"></div>
    <script>
        let cont = document.querySelector('.cont');
        let sections = document.querySelectorAll('section');
        
        let yuanquan = document.querySelector('.yuanquan');
        for(let i = 0; i < sections.length; i++){
           let spans = document.createElement('span');
           yuanquan.appendChild(spans);
        }
        let quanshu = 0;
        let moves = () => {
            let tops = quanshu * 100 + 'vh';
            cont.style.transform = `translateY(-${tops})`;
            let spanses = document.querySelectorAll('.yuanquan span');
            for(let i = 0; i < spanses.length; i++){
                spanses[i].classList.remove('actions');
                if(i == quanshu){
                    spanses[i].classList.add('actions');
                }
                spanses[i].addEventListener('click',function(){
                    quanshu = i;
                    moves();
                })
            }
        }
        moves();
        
        window.onmousewheel = function(e){
            console.log(e.wheelDelta);
            if(e.wheelDelta > 0){
                //向上
                quanshu--;
                if(quanshu < 0){
                    quanshu = 0;
                }
                moves();
            }else if(e.wheelDelta < 0){
                //向下
                quanshu ++;
                if(quanshu > sections.length - 1){
                    quanshu = sections.length - 1;
                }
                moves();
            }
        }
        let x=0,y=0;
        let isdown = false
        document.addEventListener('mousedown',function(e){
            isdown = true;
            x = e.clientX;
            y = e.clientY;
        })
        document.addEventListener('mousemove',function(e){
            if(isdown){
                if(e.clientY - y > 220 && e.clientY - y < 232){
                    quanshu ++;
                    if(quanshu > sections.length - 1){
                        quanshu = sections.length - 1;
                    }
                    moves();
                }
                if(e.clientY - y < -220 && e.clientY - y > -232){
                    quanshu --;
                    if(quanshu < 0){
                        quanshu = 0;
                    }
                    moves();
                }
            }
        })
        document.addEventListener('mouseup',function(e){
            isdown = false;
        })
    </script>
</body>
</html>